<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>canvas</title>
    <style>
        body{
            padding:0;
            margin:0;
        }
        canvas{
            background:#eee;
            padding:0;
        }
        div{
            color: #000;
            background: #ddd;
            font-size: 16px;
        }
         p{
            position: absolute;
            left:420px; top: 50px;
            padding: 10px 30px;
            color: white;
            font-size: 20px;
            font-family: "Microsoft Yahei";
            
        }
        #canvas{
            cursor: pointer;
            background:#000;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src='../js/box.js'></script>
    <script src="../js/arrow.js"></script>
    <script src='../js/utils.js'></script>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            var oP = document.getElementById('record'),
                boxes = [],
               activeBox = createBox(),
               gravity = 2.02;

            var mouse = utils.captureMouse(canvas); //捕获鼠标位置

            canvas.width = document.body.clientWidth;
            canvas.height = window.screen.availHeight*0.8;
            
             //创建一个新的box
          function createBox(){
               var color = Math.random()*(0xffffff);
               var box = new Box(Math.random()*40+10, Math.random()*40+10, color);
               box.x = Math.random()*canvas.width;
               boxes.push(box);
               return box;
           }
           
           //画boxes
           function drawBox(box){
           //判断box是否是activeBox,如果不是做碰撞检测,碰上了，创建新的box
               if(activeBox !== box && utils.intersects(activeBox, box)){
                   activeBox.y = box.y - activeBox.height;
                   activeBox = createBox();
               }
               box.draw(context);
           }
           
           //监听事件keydown
           window.addEventListener('keydown', function(event){
               switch (event.keyCode){
                   case 37:
                       activeBox.x -= 5;
                       break;
                   case 39:
                       activeBox.x += 5;
                       break;
                   case 40:
                       gravity = 2;
                       break;
               }
           }, false)
           //监听事件keyup
           window.addEventListener("keyup", function(event){
                  gravity = 0.02;
           }, false);
           
           //动画循环
          (function drawFrame(){
               window.requestAnimationFrame(drawFrame, canvas);
               context.clearRect(0, 0, canvas.width, canvas.height);
               
               activeBox.vy += gravity;
               activeBox.y += activeBox.vy;
               
               //如果到达底部就创建一个新的box
               if(activeBox.y + activeBox.height > canvas.height){
                   activeBox.y = canvas.height - activeBox.height;
                   activeBox = createBox();
               }
               
               //范围限制
              if(activeBox.x < 0 ){
                  activeBox.x = 0;
              }
              if( activeBox.x + activeBox.width > canvas.width){
                   activeBox.x = canvas.width -activeBox.width;
              }
               //绘制
               boxes.forEach(drawBox);
           }());

        }
    </script>
</body>
</html>
